<template>
   <div class="fix-page">
       <div class="all place">
           <headerNav :isShowBack="true" title="商品结算"></headerNav>
           <div class="header">
               <div class="box1">美年广场GO店</div>
               <span class="box2">></span>
               <div class="box3"><span></span><p>您距离当前门店1000米以上，请确认门店是否正确</p></div>
               <div class="box4">
                   <span>联系电话 18393248749</span>
                   <p>自动填写</p>
               </div>
           </div>
           <div class="box5">
               <span>取茶时间</span>
               <p>冰淇淋/鲜食等产品无需等待，可立即向店员领取</p>
           </div>
           <div class="middle">
               <div class="middle-left">
                   <img src="~assets/img/order/ice-img.png"/>
                   <span>芒果甘露冰棒</span>
               </div>
               <div class="middle-right">
                   <div class="price">￥ 18</div>
                   <div class="num"> x1 </div>
               </div>
           </div>
           <div class="box6">
               <span>喜茶券</span>
               <p>暂无可用 ></p>
           </div>
           <div class="box7">
               <span class="box7-left">备注</span>
               <span class="box7-right">不打包 <p>></p></span>
           </div>
           <div class="box8">
               <span>共计1件商品，小计<p>￥ 18</p></span>
           </div>
           <div class="box9">
               <span>支付方式</span>
               <p>支付宝</p>
           </div>
           <div class="footer">
               <span class="footer-left">合计<p>￥ 18</p></span>
               <span class="footer-right">支付</span>
           </div>
       </div>
   </div>

</template>

<script>
    import headerNav from 'components/HeaderNav/headerNav'
    export default {
        name: "orderPay",
        components:{
            headerNav
        },
    }
</script>

<style scoped>
    .fix-page{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        z-index: 777;
    }
    .fix-page .place{
        overflow: auto;
        height: 100%;
        background: #fff;
    }
    .all{
        background-color: #f5f5f5;
    }
    .nav{
        width: 100%;
        height: 30px;
        line-height: 33px;
        text-align: center;
        background: rgb(250, 250, 250);
    }
    .nav span{
        float: left;
        font-size: 30px;
        margin-left: 10px;
        margin-top: 3px;
        color: #ccc;
    }
    .nav div{
        font-size: 15px;
        font-weight: bold;
    }
    .header{
        width: 100%;
        padding: 10px;
        background: rgb(250, 250, 250);
    }
    .box1{
        display: inline-block;
        font-size: 18px;
        line-height: 18px;
        text-align: left;
        color: rgb(50, 50, 50);
    }
    .box2{
        margin-left: 8px;
    }
    .box3{
        color: rgb(170, 170, 170);
        margin-top: 10px;
        margin-bottom: 25px;
        font-size: 9px;
    }
    .box3 span{
        background-color: red;
        display: inline-block;
        width: 10px;
        height: 10px;
    }
    .box3 p{
        display: inline-block;
        margin-left: 5px;
    }
    .box4{
        border-top: 1px #ccc;
        padding-top:5px ;
        padding-bottom:10px;
        margin-bottom: 20px;
    }
    .box4 span{
        float: left;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
    }
    .box4 p{
        float: right;
        font-size: 12px;
        line-height: 12px;
        color: rgb(240, 171, 116);
        padding: 10px;
    }
    .box5{
        width: 100%;
        margin-top: 5px;
        padding: 10px;
        background: rgb(250, 250, 250);
    }
    .box5 span{
        font-size: 15px;
        line-height: 15px;
        padding:10px;
    }
    .box5 p{
        font-size: 10px;
        line-height: 10px;
        color: rgb(240, 171, 116);
        padding: 10px;
    }
    .middle{
        width: 100%;
        height: 120px;
        margin-top: 5px;
        padding: 10px;
        background: rgb(250, 250, 250);
    }
    .middle-left{
        float: left;
    }
    .middle-left span{
        float: left;
        padding-top: 10px;
        font-size: 18px;
        line-height: 18px;
    }
    .middle-left img{
        float: left;
    }
    .middle-right{
        float: right;
        padding-top: 10px;
        margin-right: 10px;
    }
    .price{
        font-size: 18px;
        line-height: 18px;
        color: black;
        padding-bottom: 10px;
    }
    .num{
        color: #999999;
        float: right;
        font-size: 18px;
        line-height: 18px;
    }
    .box6{
        padding: 10px;
        height: 55px;
        background: rgb(250, 250, 250);
    }
    .box6 span{
        float: left;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
    }
    .box6 p{
        float: right;
        font-size: 15px;
        line-height: 15px;
        color: rgb(170, 170, 170);
        padding: 10px;
    }
    .box7{
        padding: 10px;
        height: 55px;
        background: rgb(250, 250, 250);
    }
    .box7-left{
        float: left;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
    }
    .box7-right{
        float: right;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
    }
    .box7 p{
        float: right;
        font-size: 15px;
        line-height: 15px;
        padding-left: 5px;
        color: rgb(170, 170, 170);
    }
    .box8{
        padding: 10px;
        height: 55px;
        background: rgb(250, 250, 250);
    }
    .box8 span{
        float: right;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
        color: rgb(170, 170, 170);
    }
    .box8 p{
        float: right;
        font-size: 18px;
        line-height: 18px;
        color:black;
        padding-left: 10px;
    }
    .box9{
        width: 100%;
        margin-top: 5px;
        height: 55px;
        padding: 10px;
        background: rgb(250, 250, 250);
    }
    .box9 span{
        float: left;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
    }
    .box9 p{
        float: right;
        font-size: 12px;
        line-height: 12px;
        padding: 10px;
    }
    .footer{
        width: 100%;
        height: 70px;
        margin-top: 5px;
        padding: 10px;
    }
    .footer-left{
        float: left;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
        margin-left: 150px;
    }
    .footer-right{
        float: right;
        font-size: 15px;
        line-height: 15px;
        padding: 10px;
        background-color:rgb(240, 171, 116);
        color: rgb(250, 250, 250);
    }
    .footer p{
        float: right;
        font-size: 15px;
        line-height: 15px;
        padding-left: 5px;
        color: black;
    }
</style>